﻿<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>菜单管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/plugins/layuiadmin/style/admin.css" media="all">
</head>
<body>
  <div class="layui-fluid">
    <div class="layui-card">
      <div class="layui-card-body">
        <div style="padding-bottom: 10px;">
          <button class="layui-btn layui-btn-danger layuiadmin-btn-list" onclick="openAll();"><i class="layui-icon layui-icon-open"></i>展开或折叠全部</button>
          <button class="layui-btn layui-btn-normal layuiadmin-btn-list" data-type="add"><i class="layui-icon layui-icon-add-1"></i>添加</button>
          <button class="layui-btn layuiadmin-btn-list" data-type="refresh"><i class="layui-icon layui-icon-refresh"></i>刷新</button>
          <div class="layui-form" lay-filter="dds-search-form" id="dds-search-form" style="float:right">
            <div class="layui-inline">
             <input class="layui-input" name="name" id="name" placeholder="请输入搜索条件">
            </div>
            <button class="layui-btn" lay-submit lay-filter="btn_search"><i class="layui-icon layui-icon-search"></i>搜索</button>
          </div>
        </div>
        <table id="treeTable" lay-filter="treeTable"></table> 
        <script type="text/html" id="tpl_isadmin">
          {{#  if(d.isadmin==1){ }}
            <button class="layui-btn layui-btn-xs">是</button>
          {{#  } else { }}
            <button class="layui-btn layui-btn-primary layui-btn-xs">否</button>
          {{#  } }}
        </script>
        <script type="text/html" id="title">
            <i class="layui-icon {{d.icon}}" style="margin:5px;"></i>{{d.name}}
        </script>
        <script type="text/html" id="table-content-list">
          <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="add"><i class="layui-icon layui-icon-add-circle"></i>添加子菜单</a>
          <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
          <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
        </script>
      </div>
    </div>
  </div>
  <script src="/plugins/layui/layui.js"></script> 
  <script>
  var ptable=null,treeGrid=null,tableId='treeTable',layer=null;
  layui.config({
    base: '/plugins/layuiadmin/' //静态资源所在路径
  }).extend({
      index: 'lib/index', //主入口模块
      treeGrid:'treeGrid'
  }).use(['index','treeGrid'], function(){
      var $ = layui.$, form = layui.form;
      treeGrid = layui.treeGrid;
      layer=layui.layer;
      ptable=treeGrid.render({
        id:tableId
        ,elem: '#'+tableId
        ,idField:'id'
        ,url:'menu_list'
        ,cellMinWidth: 100
        ,treeId:'id'//树形id字段名称
        ,treeUpId:'parentid'//树形父id字段名称
        , treeShowName: 'name'//以树形式显示的字段
        ,height:'full-140'
        ,isFilter:false
          , iconOpen: true//是否显示图标【默认显示】
          , isOpenDefault: true//节点默认是展开还是折叠【默认展开】
          , cols: [[
              { field: 'name', minWidth: 300, title: '菜单名称', templet: '#title' },
              {field: 'url', minWidth: 300, title: '菜单地址'},
              {title: '操作', width: 250, align: 'center', toolbar: '#table-content-list' }
        ]]
        ,page:false
      });

    //监听搜索
    form.on('submit(btn_search)', function(data){
      var field = data.field;
      //执行重载
      treeGrid.reload(tableId, {
        where: field
      });
    });

    //监听操作
    var active = {
      add: function(){
        layer.open({
          type: 2
          ,title: '添加菜单'
          ,content: 'menu_edit.html'
          ,maxmin: true
          ,area: ['500px', '450px']
          ,btn: ['确定', '取消']
          ,yes: function(index, layero){
            //点击确认触发 iframe 内容中的按钮提交
            var submit = layero.find('iframe').contents().find("#btn_submit");
            submit.click();
          }
        }); 
      },
      refresh: function () {
        treeGrid.reload(tableId);
      }
    }; 

    $('.layui-btn.layuiadmin-btn-list').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });

    //监听工具条
    treeGrid.on('tool('+tableId+')', function(obj){
      var data = obj.data;
      if(obj.event === 'del'){
        layer.confirm('您确定要删除吗？删除后将无法进行恢复。', function(index){
          $.ajax({
                type: "post",
                url: "menu_list",
                data: {ids:data.id},
                dataType: "json",
                success: function (data) {
                    if (data.code == 0)
                    {
                      treeGrid.reload(tableId);
                      layer.msg(data.msg);
                    }
                }
          });
        });
      } else if(obj.event === 'edit'){
        layer.open({
          type: 2
          ,title: '编辑菜单'
          ,content: 'menu_edit.html?id='+data.id
          ,maxmin: true
          ,area: ['500px', '450px']
          ,btn: ['确定', '取消']
          ,yes: function(index, layero){
            var submit = layero.find('iframe').contents().find("#btn_submit");
            submit.trigger('click');
            }
        });
      } else if(obj.event === 'add'){
        layer.open({
          type: 2
          ,title: '添加子菜单'
          ,content: 'menu_edit.html?parentid='+data.id
          ,maxmin: true
          ,area: ['500px', '450px']
          ,btn: ['确定', '取消']
          ,yes: function(index, layero){
            var submit = layero.find('iframe').contents().find("#btn_submit");
            submit.trigger('click');
            }
        });
      } 
    });

  });
  function openAll() {
    var treedata=treeGrid.getDataTreeList(tableId);
    treeGrid.treeOpenAll(tableId,!treedata[0][treeGrid.config.cols.isOpen]);
  }
  </script>
</body>
</html>
